<template>
	<view class="allocate_container">
		<view class="list">
			<view class="list_one">
				<view class="title">
					选择角色
				</view>

				<view @click="handleRole(item)" class="item pl20"
					:class="{itemShow: role.some(dick => dick == item.roleKey)}" v-for="item in roleList"
					:key="item.roleKey">
					{{ item.roleName }}
				</view>
			</view>
			<view class="list_tow">
				<view class="title">
					选择绑定工序列
				</view>

				<view @click="handleBind(item)" class="item" :class="{itemShow: item.value == workSeries}"
					style="text-align: center;" v-for="item in processList" :key="item.value">
					{{ item.label }}
				</view>
			</view>
			<view class="list_three">
				<view class="title">
					选择绑定具体工序
				</view>

				<view @click="handleRoles(item)" class="item" :class="{itemShow: processs.some(dick => dick == item.value)}"
					style="text-align: center;" v-for="(item, index) in specificList" :key="index">
					{{ item.dick }}
				</view>
			</view>
		</view>


		<view class="flex p20">
			<u-button type="success" plain text="确定" @click="handleAdd"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				process: '',
				workSeries: '',
				processs: [],
				role: [],
				roleList: [],
				processList: [{
						value: 1,
						label: "成品组装",
					},
					{
						value: 2,
						label: "微定制组装",
					},
					{
						value: 3,
						label: "包装件组装",
					},
					{
						value: 4,
						label: "餐具盒定制",
					},
					{
						value: 5,
						label: "生日帽定制",
					},
					{
						value: 6,
						label: "不锈钢定制",
					},
					{
						value: 7,
						label: "餐盘定制-独立产品",
					},
					{
						value: 8,
						label: "不锈钢定制—独立产品",
					},
					{
						value: 9,
						label: "餐盘定制logo",
					},
					{
						value: 10,
						label: "四色印刷",
					},
				],
				specificList: [{
					dick: '组装',
					value: 1
				}, {
					dick: '包装',
					value: 2
				}, {
					dick: '验收入库',
					value: 3
				}],

			}
		},
		onLoad() {
			this.handleRoleList()
			// this.handleProcessList()
		},
		methods: {

			async handleAdd() {
				if (this.role.length == 0) return this.$msg.error('请选择角色')
				if (!this.workSeries) return this.$msg.error('请选择绑定工序列')
				if (this.processs.length == 0) return this.$msg.error('请选择绑定具体工序')

				const query = {
					roleKeys: this.role,
					orderOperation: this.workSeries,
					// processNumber: this.process,
					processNumbers: this.processs,
				}

				console.log(query);
				try {
					const data = await this.$api.addOrderRolePermissions(query)

					this.$msg.success('操作成功')

					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				} catch (error) {
					//TODO handle the exception
					console.log(error)
				}

			},

			handleBind(item) {
				this.workSeries = item.value

				const list1 = [{
					dick: '组装',
					value: 1
				}, {
					dick: '包装',
					value: 2
				}, {
					dick: '验收入库',
					value: 3
				}]


				if (item.value == 1 || item.value == 2) {
					this.specificList = list1
				} else if (item.value == 3) {
					this.specificList = [{
						dick: '组装',
						value: 1
					}, {
						dick: '验收入库',
						value: 3
					}]
				} else if (item.value == 4 || item.value == 5 || item.value == 6) {
					this.handleProcessChildList()
				} else {
					this.handleSubset()
				}

			},


			async handleProcessChildList() {
				const list1 = [{
					dick: '订单组装',
					value: 1
				}, {
					dick: '订单包装',
					value: 2
				}, {
					dick: '订单验收入库',
					value: 3
				}, {
					dick: '订单完结',
					value: 4
				}]
				try {
					const {
						data
					} = await this.$api.getAllWorkingProcedureListApi();
					// const filteredArray = data.filter(item => 
					//   item.workName !== '包装' && item.workName !== '组装'
					// );
					const list = data.map(item => {
						return {
							value: item.id,
							dick: item.workName
						}
					})


					this.specificList = [...list1, ...list]
				} catch (error) {
					//TODO handle the exception
				}
			},

			async handleSubset() {
				const list1 = [{
					dick: '订单组装',
					value: 1
				}, {
					dick: '订单验收入库',
					value: 3
				}, {
					dick: '订单完结',
					value: 4
				}]
				try {
					const {
						data
					} = await this.$api.getAllWorkingProcedureListApi();
					// const filteredArray = data.filter(item => 
					//   item.workName !== '包装' && item.workName !== '组装'
					// );
					const list = data.map(item => {
						return {
							value: item.id,
							dick: item.workName
						}
					})


					this.specificList = [...list1, ...list]
				} catch (error) {
					//TODO handle the exception
				}
			},

			// 选择角色
			handleRole(e) {
				const index = this.role.findIndex(item => item == e.roleKey);
				const exists = index !== -1;

				if (exists) {
					this.role.splice(index, 1)
				} else {
					this.role.push(e.roleKey)
				}
			},
			
			handleRoles(e) {
				const index = this.processs.findIndex(item => item == e.value);
				const exists = index !== -1;

				if (exists) {
					this.processs.splice(index, 1)
				} else {
					this.processs.push(e.value)
				}
			},


			// 获取角色
			async handleRoleList() {
				try {
					const {
						rows
					} = await this.$api.getRoleApi()

					this.roleList = rows
				} catch (error) {
					//TODO handle the exception
				}
			},

			// 工序
			// async handleProcessList() {
			// 	try {
			// 		const {data} = await this.$api.getAllTypeApi()

			// 		this.processList = data
			// 	} catch (error) {
			// 		//TODO handle the exception
			// 	}
			// },
		}
	}
</script>

<style scoped lang="scss">
	.allocate_container {
		width: 100%;

		.list {
			width: 100%;
			display: flex;
			background-color: #FFF;
			height: calc(100vh - 200rpx);

			>view {
				height: 100%;
				overflow: auto;
			}

			&_one {
				flex: 3;
			}

			&_tow {
				flex: 4;
				border-left: 1rpx solid #BBBBBB;
				border-right: 1rpx solid #BBBBBB;
			}

			&_three {
				flex: 4;
			}

			.title {
				font-weight: bold;
				text-align: center;
				height: 70rpx;
				line-height: 70rpx;
			}


			.item {
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
			}

			.itemShow {
				background-color: #347CAF;
				color: #FFF;
			}
		}
	}
</style>